<!--
 * @Author: 陈俊升 761723995@qq.com
 * @Date: 2023-11-07 09:43:46
 * @LastEditors: 陈俊升 761723995@qq.com
 * @LastEditTime: 2023-11-23 15:36:23
 * @FilePath: /hr_new_vue3/src/views/Management/Contract/BaseSetting/ContractTemplate/Components/AddTemplate/ContractBaseInfo.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<!-- 合同基础设置 -->
<template>
  <div class="step3">
    <div class="left">
      <div class="title">选择合同</div>
      <div class="left-body">
        <a-button
          v-for="(item, index) in ['新合同', '原合同']"
          :key="index"
          size="mini"
          class="butss"
          :status="newOrOld === index ? 'success' : 'normal'"
          shape="round"
          @click="newOrOld = index"
        >
          {{ item }}
        </a-button>
      </div>

      <div class="title">选择合同与附件</div>
      <div class="left-body">
        <a-button
          v-for="(item, index) in oldTemplateList"
          :key="index"
          size="mini"
          class="butss"
          :status="choiceIndex === index ? 'success' : 'normal'"
          shape="round"
          @click="choiceIndex = index"
        >
          {{ item.name }}
        </a-button>
      </div>
    </div>
    <div
      :style="
        'width:' +
        (paper.a4.width - 40) +
        'px;padding:20px;min-height:' +
        (paper.a4.height - 40) +
        'px'
      "
      class="dandan"
      v-html="text"
    />
  </div>
</template>

<script setup lang="ts">
import { paper } from '@/utils/printAndPdf';
import { SwitchDraftWaitSignedContract } from '@/apis/management/contract/contractManagement/waitSigned';
let props = withDefaults(
  defineProps<{
    oldTemplateList: any[];
    newTemplateList: any[];
    userId: number;
  }>(),
  {}
);

let newOrOld = ref(0);
let choiceIndex = ref(0);

let text = ref('');
watch(newOrOld, () => loadText());
watch(choiceIndex, () => loadText());
let loadText = async () => {
  if (!props[!newOrOld.value ? 'newTemplateList' : 'oldTemplateList'].length)
    return;
  let item =
    props[!newOrOld.value ? 'newTemplateList' : 'oldTemplateList'][
      choiceIndex.value
    ];
  let res = await SwitchDraftWaitSignedContract({
    id: props.userId,
    text: item.text,
    codes: item.codes
  });
  text.value = res;
};
defineExpose({ loadText });
</script>

<style lang="less" scoped>
.step3 {
  display: flex;
  justify-content: center;
  .left {
    margin-right: 20px;
    width: 220px;
    .title {
      font-weight: 600;
      font-size: 16px;
    }

    &-body {
      padding-top: 10px;
      padding-bottom: 10px;
    }
    box-shadow: 0px 0px 5px var(--color-neutral-6);
    margin-bottom: 70px;
    padding: 20px;
  }
  .butss {
    margin: 5px;
  }
  .dandan {
    word-wrap: break-word;
    box-shadow: 0px 0px 5px var(--color-neutral-6);
    // transform: scale(1.4);
  }

  margin-bottom: 70px;
}
</style>
